<template>
  <div class="com-container">
      <div class="com-chart" ref="stock_ref"></div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            chartInstance:null,
            allDate:null,
            currentIndex:0,//代表当前显示的数据的页数
            timerId:null,//定时器的一个标识
        }
    },
    mounted(){
        this.initChart()
        this.getDate()
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    destroyed(){
        window.removeEventListener('resize',this.screenAdapter)
        clearInterval(this.timerId)
    },
    methods:{
        initChart(){
            this.chartInstance = echarts.init(this.$refs.stock_ref,'chalk')
            const initOption = {
                title:{
                    text:'▎ 库存和销量分析',
                    left:20,
                    top:20
                }
            }
            this.chartInstance.setOption(initOption)
            this.chartInstance.on('mouseover',()=>{
                clearInterval(this.timerId)
            })
            this.chartInstance.on('mouseout',()=>{
                this.startInterval()
            })
        },
        async getDate(){
            //获取服务器的数据，对this。alldata进行赋值后。调用updatachart方法跟新图表
            const {data :ret} = await this.$http.get('stock')
            this.allDate = ret
            console.log(this.allDate);
            this.updateChart()
            this.startInterval()
        },
        updateChart(){
            const centerArr = [
                ['18%','40%'],
                ['50%','40%'],
                ['82%','40%'],
                ['34%','75%'],
                ['66%','75%'],
            ]
            const colorArr = [
                ['#4FF778','#0BA82C'],
                ['#E5DD45','#E8811C'],
                ['#E8821C','#E55445'],
                ['#5052EE','#AB6EE5'],
                ['#23E5E5','#2E728F'],
            ]
            //处理图表所需要的数据
            const start = this.currentIndex*5
            const end = (this.currentIndex+1)*5
            const showData = this.allDate.slice(start,end)
            const seriesArr = showData.map((item,index)=>{
               return{
                   type:'pie',
                   radius:[110,100],
                   center:centerArr[index],
                   hoverAnimation:false,//关闭鼠标移入到饼图时的动画效果
                   labelLine:{
                       show:false  //隐藏指示线
                   },
                   label:{
                       position:'center',
                       color:colorArr[index][0],
                   },
                   data:[
                       {
                        name:item.name + '\n' + item.sales,
                        value:item.sales,
                        itemStyle:{
                            color:{
                            type: "linear",
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            colorStops: [
                                {
                                offset:0,
                                color:colorArr[index][0]// 0% 处的颜色
                                },
                                {
                                offset:1,
                                color:colorArr[index][1] // 100% 处的颜色
                                }
                            ],
                            globalCoord: false
                        }
                        }
                       },
                       {
                        value:item.stock,
                        itemStyle:{
                            color:'#6F89A2'
                        }
                       },
                   ]
               }
           })
            const dataOption = {
                series:seriesArr
            }
            this.chartInstance.setOption(dataOption)
        },
        screenAdapter(){
            const titleFontSize = this.$refs.stock_ref.offsetWidth/100*3.6
            const innerRadius = titleFontSize*2
            const outterRadius = innerRadius*1.125
            const adapterOption = {
                title:{
                    textStyle:{
                        fontSize:titleFontSize,

                    }
                },
                series:[
                    {
                        type:'pie',
                        radius:[outterRadius,innerRadius],
                        label:{
                            fontSize:titleFontSize/2
                        }
                    },
                    {
                        type:'pie',
                        radius:[outterRadius,innerRadius],
                         label:{
                            fontSize:titleFontSize/2
                        }
                    },
                    {
                        type:'pie',
                        radius:[outterRadius,innerRadius],
                         label:{
                            fontSize:titleFontSize/2
                        }
                    },
                    {
                        type:'pie',
                        radius:[outterRadius,innerRadius],
                         label:{
                            fontSize:titleFontSize/2
                        }
                    },
                    {
                        type:'pie',
                        radius:[outterRadius,innerRadius],
                         label:{
                            fontSize:titleFontSize/2
                        }
                    },
                ]
            }
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()
        },
        startInterval(){
            if(this.timerId){
                clearInterval(this.timerId)
            }
            this.timerId = setInterval(()=>{
                this.currentIndex++
               if(this.currentIndex>1){
                   this.currentIndex = 0
               }
               this.updateChart() //在更改晚currentIndex之后，需要跟新界面
            },5000)
        }
    }
}
</script>

<style>

</style>